<!--激光传感器-->
<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <%include("/common/header.html",{title:''}){}%>
    <title>阀门管理</title>
    <style>
        .layui-form-item {
            margin-bottom: 26px;
            clear: both;
        }
    </style>
</head>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IENn7ABARjQIkTeAKyh80VTkg2jYXf3K"></script>
<body>
<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">详细数据</a><span lay-separator="">/</span>
        <a><cite>激光传感器数据</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3"></i>
    </a>
</div>

<div style="padding: 20px; background-color: #F2F2F2;">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table" lay-data="{url:'system/valve/findAll.json', cellMinWidth: 80, page: true}">
                        <thead>
                        <tr>
                            <th lay-data="{field:'username', width:80,align:'center'}" rowspan="2">编号</th>
                            <th lay-data="{align:'center'}" colspan="3">位移数据</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">预警值1</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">预警值2</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">预警值3</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">平均值</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">最大值</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">最小值</th>
                            <th lay-data="{field:'amount', width:120,align:'center'}" rowspan="3">状态</th>

                        </tr>
                        <tr>
                            <th lay-data="{field:'province'}" rowspan="2"></th>
                            <th lay-data="{field:'city'}" rowspan="2"></th>
                            <th lay-data="{field:'province'}" rowspan="2"></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao" class="layui-input">
                    <option value="">请选择传感器编号</option>
                    <option value="0">1</option>
                    <option value="1">2</option>
                    <option value="2">3</option>
                    <option value="3">4</option>
                    <option value="4">5</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
            <div class="layui-input-inline">
                <button  class="layui-btn layui-btn-checked" lay-submit="" lay-filter="LAY-user-front-search"  ><i class="layui-icon layui-icon-search"></i>查询</button>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    $(function () {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                name:'单位cm',
                type: 'value',
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };

        myChart.setOption(option, true);
    })

    layui.use(['index', 'table', 'form', 'laydate', 'layedit', 'AjaxCommon', 'AliangLayui'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var AjaxCommon = layui.AjaxCommon;
        var AliangLayui = layui.AliangLayui;

        var title = "添加阀门信息";
        var findAll_url = 'system/valve/findAll.json';
        var update_url = 'system/valve/update.json';
        var delete_url = 'system/valve/delete.json';
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });
        // var cols = [ //设备信息列表表头
        //     /*{checkbox: true, fixed: true},*/
        //     {field: 'zizeng', fixed: 'left',  title: '编号',type:'numbers'},
        //     // { title: '放置地点'},
        //     { colspan:2,  title: '位移数据'},
        //     {field: 'number'},
        //     {field: 'numbers'},
        //     {field: 'numberss'},
        //     {field: 'startCommand',   title: '检测时间'},
        //     {field: 'endCommand',   title: '预警值1'},
        //     {field: 'endCommand',   title: '预警值2'},
        //     {field: 'endCommand',   title: '预警值3'},
        //     {field: 'endCommand',   title: '平均值'},
        //     {field: 'endCommand',   title: '最大值'},
        //     {field: 'endCommand',   title: '最小值'},
        //     {field: 'endCommand',   title: '状态'},
        // ];


        // table.render({
        //     elem: '#LAY-user-manage',
        //     id:'listReload',
        //     toolbar:"#toolbarDemo"
        //     ,title:title
        //     ,url: findAll_url //数据接口
        //     ,page: true //开启分页
        //     ,cols:[cols],
        //     defaultToolbar: ['filter', 'print', 'exports'],
        //     done:function(res){
        //         merge(res)
        //     }
        //
        // });

        //设备信息列表
        // AliangLayui.createTable(
        //     "#LAY-user-manage",
        //     "listReload",
        //     "#toolbarDemo",
        //     title,
        //     findAll_url,
        //     true,
        //     [10, 15, 20, 25],
        //     ['filter', 'print', 'exports'],
        //     cols,
        //     {departId:$("#departId").val()},
        //     function (res) {
        //
        //     }
        // );


        //初始化日期模块


        //弹出修改页面调用初始化数据方法



        //监听搜索
        form.on('submit(LAY-user-front-search)', function(data) {
            var field = data.field;
            //执行重载
            table.reload('listReload', {
                where :{
                    departName:field.departName
                },
                page: {
                    curr: 1//重新从第 1 页开始
                }
            });
        });


        //头工具栏事件
        table.on('toolbar(LAY-user-manage)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    initUpdate(0);
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        //var id = new Array(); //声明数组
                        for (var i in data) {
                            var a = data[i].id; //得到复选框的值
                            postDelete(a);
                        }
                    } else {
                        layer.msg("至少选择一个进行删除");
                    }
                    break;
                case 'export':
                    layer.msg("导出");
                    break;
            }
        });

        //点击每行右工具栏“操作”里面按钮效果
        table.on('tool(LAY-user-manage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('删除以后数据将不能恢复，确定删除吗？', function(index) {
                    postDelete(data.id);
                });
            }else if (obj.event === 'edit') {
                initUpdate(data);
            }
        });

        //修改页面的内容提交到后台处理
        form.on('submit(component-form-element)', function (data) {
            postUpdate(data);
            return false;
        });

        //ajax提交删除内容
        window.postDelete = function (id) {
            AjaxCommon.ajax(delete_url, "post", "json", {"id": id}, function (ret) {
                if (ret == null) {
                    layer.msg("删除失败", {
                        icon: 5
                    });
                } else {
                    layer.msg(ret.msg, {time: 600, icon: 6}, function () {
                        location.replace(location.href);
                    });
                    layer.closeAll();
                    // table.reload('listReload');
                }
                return ret;
            });
        };



        //ajax提交修改内容
        window.postUpdate = function (data) {
            var formData = new FormData();
            formData.append("data", JSON.stringify(data.field));
            $.ajax({
                url: update_url,
                type: "POST",
                //traditional:true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    //alert(JSON.stringify(data));
                    if (data.code == 0) {
                        layer.closeAll();
                        layer.msg(data.msg, {time: 600, icon: 1}, function () {
                            location.replace(location.href);
                        });
                    } else {
                        layer.msg(data.msg, {icon: 5});
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var estr = "Page:" + window.location.pathname + ",Function:postUpdate()";
                    layer.open({
                        title: "错误信息",
                        type: 2,
                        content: "base/error.jhtml?info=" + estr,
                        btn: ['关闭'] //可以无限个按钮
                    });
                }
            });
        }
    });

</script>

</body>

</html>
